<template>
<!--资金管理首页-->
<div>
    <common-title title-name="资金预算情况"/>
    <div class="capital-budgeting-content d-flex j-sb">
        <public-card v-for="(n, i) in cardInfo.cardArr1" :key="i" :title="n.title" :url="n.url" :unit="n.unit" :num="n.num" get-width="350px" icon-type="svg"></public-card>
        <div class="d-flex flex-column">
            <img
                class="bg-icon"
                src="@/assets/iconImg/property-bg-1.jpg"
                @click="toPage('1')"
            />
            <img
                class="bg-icon"
                src="@/assets/iconImg/property-bg-2.jpg"
                @click="toPage('2')"
            />
        </div>
    </div>
    <common-title title-name="预算执行情况"/>
    <div class="implementation-content d-flex">
        <public-card class="m-r50" v-for="(n, i) in cardInfo.cardArr2" :key="i" :title="n.title" :url="n.url" :unit="n.unit" :num="n.num" get-width="350px" icon-type="svg"></public-card>
    </div>
    <common-title class="m-t20" title-name="融资情况"/>
    <div class="financing-content d-flex">
        <public-card class="m-r50" v-for="(n, i) in cardInfo.cardArr3" :key="i" :title="n.title" :url="n.url" :unit="n.unit" :num="n.num" get-width="350px" icon-type="svg"></public-card>
    </div>
</div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import PublicStatistics from "@/components/PublicStatistics.vue";
import {onMounted, reactive} from "vue";
import {financingApi, fundManagementApi} from "@/api/businessFinance";
import {useRouter} from "vue-router";
import PublicCard from "@/components/uploadCom/public-card.vue";

const cardInfo = reactive({
    cardArr1: [
        {
            title: "总资金预算金额",
            num: "",
            url: 'property-icon-6',
            unit: "元",
            iconType: 'svg'
        },
    ],
    cardArr2: [
        {
            title: "流出执行率",
            num: "",
            url: 'property-icon-1',
            unit: "%",
            iconType: 'svg'
        },
        {
            title: "流入执行率",
            num: "",
            url: 'property-icon-2',
            unit: "%",
            iconType: 'svg'
        },
        {
            title: "计划外执行金额",
            num: "",
            url: 'property-icon-3',
            unit: "%",
            iconType: 'svg'
        },
    ],
    cardArr3:[
        {
            title: "融资总金额",
            num: "",
            url: 'property-icon-4',
            unit: "元",
            iconType: 'svg'
        },
        {
            title: "融资额度占用情况",
            num: "",
            url: 'property-icon-5',
            unit: "%",
            iconType: 'svg'
        },
    ]
});

/**
 * 资金统计
 */
const getFundBudget = () => {
     fundManagementApi.getFundBudget().then(res=>{
         cardInfo.cardArr1[0].num = res.data.total;
         cardInfo.cardArr2[0].num = res.data.capitalOutflow.toFixed(2);
         cardInfo.cardArr2[1].num = res.data.capitalInflow.toFixed(2);
         cardInfo.cardArr2[2].num = res.data.unplannedExecutionAmount.toFixed(2);
     });
}

/**
 * 融资情况统计
 */
const getFinancing = () => {
    financingApi.getFinancing().then(res=>{
        cardInfo.cardArr3[0].num = res.data.financingTotal;
        cardInfo.cardArr3[1].num = res.data.occupationOfFinancingLimit.toFixed(2);
    });
}

/**
 * 跳转页面
 * @type {Router}
 */
const router = useRouter();
const toPage = (type) => {
  switch (type) {
      case '1':
          router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/index`});
          break;
      case '2':
          router.push({path:`/businessFinance/fundManagement/fundBudgetManagement/budgeting`});
          break;
  }
}

onMounted(()=>{
    getFundBudget();
    getFinancing();
});
</script>

<style lang="scss" scoped>
.capital-budgeting-content{
    .bg-icon{
        width: 216px;
        height: 88px;
        cursor: pointer;
    }
}
</style>